import { ComponentType } from '../types/component';
import type { Component } from '../types/component';

/**
 * 组件工具函数集
 */

/**
 * 获取组件默认布局
 * @param type 组件类型
 * @returns 默认布局配置
 */
export const getDefaultLayout = (type: ComponentType): Component['layout'] => {
  switch (type) {
    case ComponentType.BUTTON:
      return { x: 0, y: 0, w: 2, h: 1, minW: 1, minH: 1 };
    case ComponentType.INPUT:
      return { x: 0, y: 0, w: 4, h: 1, minW: 2, minH: 1 };
    case ComponentType.SELECT:
      return { x: 0, y: 0, w: 4, h: 1, minW: 2, minH: 1 };
    case ComponentType.SEARCH_BAR:
      return { x: 0, y: 0, w: 4, h: 1, minW: 2, minH: 1 };
    case ComponentType.TABLE:
      return { x: 0, y: 0, w: 12, h: 6, minW: 4, minH: 4 };
    case ComponentType.FORM:
      return { x: 0, y: 0, w: 6, h: 6, minW: 4, minH: 4 };
    case ComponentType.DATE_PICKER:
      return { x: 0, y: 0, w: 4, h: 1, minW: 2, minH: 1 };
    default:
      return { x: 0, y: 0, w: 4, h: 2, minW: 2, minH: 1 };
  }
};

/**
 * 获取组件默认属性
 * @param type 组件类型
 * @returns 默认属性配置
 */
export const getDefaultProps = (type: ComponentType): Record<string, unknown> => {
  switch (type) {
    case ComponentType.BUTTON:
      return { 
        text: '按钮', 
        type: 'primary',
        style: { width: '100%' } 
      };
    case ComponentType.INPUT:
      return { 
        placeholder: '请输入内容',
        style: { width: '100%' } 
      };
    case ComponentType.SELECT:
      return { 
        placeholder: '请选择',
        options: [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' }
        ],
        style: { width: '100%' } 
      };
    case ComponentType.SEARCH_BAR:
      return { 
        placeholder: '搜索...',
        style: { width: '100%' } 
      };
    case ComponentType.TABLE:
      return { 
        columns: [
          { title: '列1', dataIndex: 'col1', key: 'col1' },
          { title: '列2', dataIndex: 'col2', key: 'col2' }
        ],
        dataSource: [
          { id: 1, col1: '数据1', col2: '值1' },
          { id: 2, col1: '数据2', col2: '值2' }
        ],
        pagination: false,
        style: { width: '100%' } 
      };
    case ComponentType.FORM:
      return {
        layout: 'horizontal',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        fields: [
          { name: 'field1', label: '字段1', type: 'input' },
          { name: 'field2', label: '字段2', type: 'input' }
        ],
        style: { width: '100%' }
      };
    case ComponentType.DATE_PICKER:
      return { 
        format: 'YYYY-MM-DD',
        style: { width: '100%' } 
      };
    default:
      return { style: { width: '100%' } };
  }
};

/**
 * 创建新组件
 * @param type 组件类型
 * @param name 组件名称
 * @returns 新组件实例
 */
export const createComponent = (type: ComponentType, name?: string): Component => {
  const id = `comp_${Date.now()}`;
  const layout = getDefaultLayout(type);
  const props = getDefaultProps(type);
  
  return {
    id,
    type,
    name: name || type,
    props,
    layout,
    events: []
  };
};

/**
 * 复制组件
 * @param component 源组件
 * @param offsetX X位置偏移量
 * @param offsetY Y位置偏移量
 * @returns 新组件副本
 */
export const cloneComponent = (
  component: Component, 
  offsetX: number = 1, 
  offsetY: number = 1
): Component => {
  const id = `comp_${Date.now()}`;
  
  return {
    ...component,
    id,
    layout: {
      ...component.layout,
      x: (component.layout.x + offsetX) % 12,
      y: component.layout.y + offsetY
    }
  };
};

/**
 * 组件对齐计算
 */
export const alignComponents = (components: Component[], targetId: string, alignment: 'left' | 'right' | 'top' | 'bottom' | 'center-h' | 'center-v'): Component[] => {
  const result = [...components];
  const targetComponent = components.find(comp => comp.id === targetId);
  
  if (!targetComponent) return result;
  
  // 选出除目标组件外的其他选中组件
  const toAlignComponents = components.filter(comp => comp.id !== targetId);
  
  // 根据对齐方式调整位置
  toAlignComponents.forEach(comp => {
    const index = result.findIndex(c => c.id === comp.id);
    if (index === -1) return;
    
    const updatedComp = { ...comp };
    
    switch (alignment) {
      case 'left':
        updatedComp.layout = { ...updatedComp.layout, x: targetComponent.layout.x };
        break;
      case 'right':
        updatedComp.layout = { 
          ...updatedComp.layout, 
          x: targetComponent.layout.x + targetComponent.layout.w - updatedComp.layout.w 
        };
        break;
      case 'top':
        updatedComp.layout = { ...updatedComp.layout, y: targetComponent.layout.y };
        break;
      case 'bottom':
        updatedComp.layout = { 
          ...updatedComp.layout, 
          y: targetComponent.layout.y + targetComponent.layout.h - updatedComp.layout.h
        };
        break;
      case 'center-h':
        updatedComp.layout = { 
          ...updatedComp.layout, 
          y: targetComponent.layout.y + (targetComponent.layout.h - updatedComp.layout.h) / 2
        };
        break;
      case 'center-v':
        updatedComp.layout = { 
          ...updatedComp.layout, 
          x: targetComponent.layout.x + (targetComponent.layout.w - updatedComp.layout.w) / 2
        };
        break;
    }
    
    result[index] = updatedComp;
  });
  
  return result;
};

/**
 * 计算组件是否在选择框内
 * @param component 组件
 * @param selectionBox 选择框
 * @param rowHeight 行高
 * @param colWidth 列宽
 * @returns 是否在选择框内
 */
export const isComponentInSelectionBox = (
  component: Component,
  selectionBox: { x: number, y: number, width: number, height: number },
  rowHeight: number,
  colWidth: number
): boolean => {
  // 计算组件的实际位置和尺寸
  const compLeft = component.layout.x * colWidth;
  const compTop = component.layout.y * rowHeight;
  const compRight = compLeft + component.layout.w * colWidth;
  const compBottom = compTop + component.layout.h * rowHeight;
  
  // 判断是否有交集
  return !(
    compRight < selectionBox.x ||
    compLeft > selectionBox.x + selectionBox.width ||
    compBottom < selectionBox.y ||
    compTop > selectionBox.y + selectionBox.height
  );
};
